<template>
	<view>
		<view class="retrieve-password-he">
			<h1>找回密码</h1>
			<p>为了您的账户安全,1天只能操作1次,否则账户将会被锁定无法登陆</p>
		</view>
		<view class="retrieve-password-input">
			<view class="login-index-context-input">
			  <input-box
			  style="background-color:#FFFFFF ;"
			  leftText="+86"
			  ref="input1"
			  v-model="form.loginName"
			  :verification="['isNull','isPhoneNum']" 
			  :verificationTip="['手机号码不能为空','请输入正确的手机号']" 
			  placeholder="请输入手机号码"
			   maBtm="10" 
			   maxLength="11"
			   ></input-box>
			</view>
			<view style="margin-top: 2rem;border-radius: 0.5rem">
				<van-button type="primary" size="large" @click="retieve">完成</van-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pattern: /^1[35789]\d{9}$/,
				form:{
					loginName:undefined
				},
				loginError:"",
			}
		},
		methods: {
			async retieve(){
				if(this.$refs.input1.getValue()){
					const res = await this.$myRequest({
						url:'/api/login/getPhoneCode',
						method:'post',
						data:this.loginForm,
					});
					console.log(JSON.stringify(res.data.code));
					uni.navigateTo({
						url:'/pages/login/retrieve_code?loginName='+this.form.loginName+"&code=642759"
					})
				}
			}
		}
	}
</script>

<style>
 .retrieve-password-he h1{
    font-size: 1.5rem;
    padding: 1rem;
    text-align: left;
    margin-top: 30%;
  }
  .retrieve-password-he p{
    font-size: 0.7rem;
    padding: 0 1rem;
    color: #999999;
  }
  .retrieve-password-input{
    padding: 1rem;
  }
  .retrieve-password-input .input{
    border-left: 1px solid #ccc;
    background-color: #ebedf0;
    margin: 0.8rem 0;
  }
</style>
